{include file="public/header" /}
<body>
<div class="header">
    <span class="layui-icon layui-icon-left" onclick="load_href('{:url(\'user/index\')}',2)"></span> 我的订单
</div>
<ul class="my-order-nav bgc">
    <li data-type="" class="{if !$Request.param.type}active{/if}">全部</li>
<!--    <li data-type="1" class="{if $Request.param.type == 1}active{/if}">待付款</li>-->
    <li data-type="2" class="{if $Request.param.type == 2}active{/if}">待发货</li>
<!--    <li data-type="3" class="{if $Request.param.type == 3}active{/if}">待收货</li>-->
    <li data-type="4" class="{if $Request.param.type == 4}active{/if}">已完成</li>
</ul>
<ul class="my-order-list tpl_list"></ul>
<script id="template" type="text/html">
    {{# for(var i=0;i < d.data.length ;i++){ }}
    <li onclick="location.href='{:url(\'order/my_order_details\')}?id={{d.data[i].id}}'">
        <div class="title flex-layout">订单编号：{{d.data[i].sn}} <span class="bc">{{d.data[i].status}}</span></div>
        <ul class="my-order-pro">
            {{# for(var j=0;j < d.data[i].productsField.length;j++){ }}
            <li>
                <p class="flex-center">
                    <img src="{{d.data[i].productsField[j].icon}}" alt="">
                </p>
                <div>
                    <p>{{d.data[i].productsField[j].title}}</p>
                    <p class="price">￥<span>{{d.data[i].productsField[j].vip_price}}</span></p>
                </div>
                <p style="display: flex;align-items: center;justify-content: center">x{{d.data[i].productsField[j].num}}</p>
            </li>
            {{# } }}
        </ul>
        <div class="my-order-btn">
            {{# if(d.data[i].statusCode == 1){ }}
                <p class="bc" onclick="location.href='{:url(\'order/payment\')}?id={{d.data[i].id}}'">立即付款</p>
                <p class="bc cancel clearOrder" data-id="{{d.data[i].id}}">取消订单</p>
            {{# }else if(d.data[i].statusCode == 3) { }}
                <p class="bc receipt" data-id="{{d.data[i].id}}" >确认收货</p>
                <a href="javascript:;" data-id="{{d.data[i].id}}" class="bc receipt"></a>
            {{# }else { }}
            {{# } }}
        </div>
    </li>
    {{# } }}
</script>
</body>
{include file="public/footer"/}
<script>
    $(function () {
        getFlow('{$Request.param.type?:""}', "{:url('order/getList')}");
        $('.my-order-nav li').click(function () {
            $(".tpl_list").empty();
            getFlow($(this).attr('data-type'), "{:url('order/getList')}");
            $(this).addClass('active').siblings().removeClass('active')
        });
        $('.tpl_list').on('click', '.clearOrder', function () {
            const id = $(this).attr('data-id');
            edit('clear', id, '确认要取消订单吗？')
        }).on('click', '.receipt', function () {
            const id = $(this).attr('data-id');
            edit('receipt', id, '是否确认收货？')
        });
        function edit(type, id, msg) {
            layer.confirm(msg, {title: '请确认'}, function () {
                common.load()
                $.ajax({
                    type: 'POST',
                    url: '{:url("order/edit")}',
                    data: {type: type, id: id},
                    dataType: "json",
                    success: function (data) {
                        layer.closeAll;
                        layer.msg(data.msg);
                        if (data.code == 1) {
                            $(".tpl_list").empty();
                            getFlow($(".active").attr('data-type'), "{:url('order/getList')}");
                        }
                    }
                });
            });
        }
    })
</script>
</html>